<!-- 学生注册申请 -->
<template>
	<view class="list">
		<view class="list-head">
			<u-tabs :list="list" :is-scroll="false" :show-bar="false" :current="tabIndex" @change="change"></u-tabs>
		</view>
		<view class="flex search" v-if="tabIndex == 0">
			<u-search style="width: 100%;" :show-action="true" :placeholder='placeholder' :clearabled="true" v-model="search" input-align="center" action-text="搜索" :animation="true" @custom="custom"></u-search>
		</view>
		<view class="list-date flex" v-else>
			<view class="list-date-input" style="flex: 1;overflow: hidden;" @click="calendar=true">
				{{time.startDate?time.startDate+'到'+time.endDate:'选择时间'}}
			</view>
			<view class="reset" v-if="time.startDate" @click="reset()">
				重置
			</view>
		</view>
		<!-- <view class="">
			<view class="li flex" v-for="(item,index) in datalist" :key="index">
				<view class="">
					<view class="li-name">
						申请人 {{item.username}}
					</view>
					<view class="">
						手机号 {{item.phone}}
					</view>
					<view class="">
						所在学院名称 {{item.academy}}
					</view>
				</view>
				<view class="li-btn">
					操作
				</view>
			</view>
		</view> -->
		
		<view class="">
			<!-- @click="$navigateTo('../index/index?applyId='+item.applyId)" -->
			<view class="li flex" v-for="(item,index) in datalist" :key="index">
				<!-- 当前审查 -->
				<view class="" v-if="tabIndex == 0 && current == 0">
					<view class="li-name">
						<text>学生姓名</text> {{item.username}}
					</view>
					<view class="li-name">
						<text>学生电话</text> {{item.phone}}
					</view>
					<view class="li-name">
						<text>所在班级</text> {{item.grade}}
					</view>
					<view class="li-name">
						<text>学院名称</text> {{item.academy}}
					</view>
				</view>
				<!-- 当前审批 -->
				<view class="" v-if="tabIndex == 0 && current == 1" @click="getDetail(0,1,item)">
					<view class="li-name">
						<text>申请人</text> {{item.username}}
					</view>
					<view class="li-name">
						<text>申请人电话</text> {{item.phone || '未填写'}}
					</view>
					<view class="li-name">
						<text>人员类型</text> {{item.applyType == '01'?'学生申请':'校外申请'}}
					</view>
					<view class="li-name">
						<text>受访人姓名</text> {{item.toUserName || '未填写'}}
					</view>
					
					<view class="li-name">
						<text>{{item.applyType=='02'?'被访人所在学院':'所在学院'}}</text> {{item.academy || '未填写'}}
					</view>
					<view class="li-name">
						<text>事由</text> {{item.reason || '未填写'}}
					</view>
				</view>
				
				<!-- 历史审批 -->
				<view class="" v-if="tabIndex == 1 && current == 1" @click="getDetail(0,1,item)">
					<view class="li-name">
						<text>申请人</text> {{item.applyUserName}}
					</view>
					<view class="li-name">
						<text>申请人号码</text> {{item.applyUserPhone}}
					</view>
					<view class="li-name">
						<text>受访人姓名</text> {{item.toUserName || '未填写'}}
					</view>
					<view class="li-name">
						<text>审批名称</text> {{item.approveName}}
					</view>
					<view class="li-name">
						<text>事由</text> {{item.reason}}
					</view>
					<view class="li-name">
						<text>审批状态</text> {{item.approveValue}}
					</view>
					<view class="li-name">
						<text>审批时间</text> {{item.endTime}}
					</view>
				</view>
				<!-- 历史审查 -->
				<view class="" v-if="tabIndex == 1 && current == 0">
					<view class="li-name">
						<text>申请人</text> {{item.censorUserName}}
					</view>
					<view class="li-name">
						<text>审查人</text> {{item.userName}}
					</view>
					<view class="li-name">
						<text>审查状态</text> {{item.operName}}
					</view>
					<view class="li-name">
						<text>审查备注</text> {{item.note}}
					</view>
					<view class="li-name">
						<text>审查时间</text> {{item.operTime}}
					</view>
				</view>
				<view class="li-btn" v-if="tabIndex != 1" @click.stop="getItem(item)">
					操作
				</view>
			</view>
		</view>
		<view class="" style="margin: 50rpx;">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="popup">
				<textarea value="" v-model="opinion" placeholder="请输入原因" />
				<view class="flex btn">
					<view @click="setItem(item,current,1)">拒绝</view>
					<view @click="setItem(item,current,2)">同意</view>
				</view>
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-calendar v-model="calendar" @change="calendarChange" mode="range"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search:'',
				calendar:false,//时间控件
				placeholder:'请输入学院名称',
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				datalist:[],
				list:[],
				list2: [{
					name: '当前审批'
				}, {
					name: '历史审批'
				}],
				list1: [{
					name: '当前审查'
				}, {
					name: '历史审查'
				}],
				tabIndex:0,
				show:false,
				opinion:'',
				time:{},
				item:{}//操作时选中的列表
			}
		},
		props:['current'],
		created() {
			this.currentList()
			this.list = this.list2
		},
		watch:{
			// 切换头部内容
			current(e){
				if(e==1){
					this.list = this.list2
					this.getlist1()
				}else{
					this.list = this.list1
				}
				this.setlist()
			},
			tabIndex(e){
				this.setlist()
			}
		},
		methods:{
			// 历史列表重置
			reset(){
				this.time = {}
				this.setlist()
			},
			
			// 时间空间选择
			calendarChange(e){
				console.log(e);
				this.time = e
				this.historyList()
			},
			
			custom(e){
				this.setlist()
			},
			setlist(){
				if(this.tabIndex == 0 && this.current == 0){//审查
					this.getlist1()
					this.placeholder = '请输入学院名称'
					console.log('审查--------------------------------');
				}else if(this.tabIndex == 0 && this.current == 1){//审批
					this.currentList()
					this.placeholder = '请输入申请人所在学院'
					console.log('审批-------------------------------');
				}else if(this.tabIndex == 1 && this.current == 0){//历史审查
					this.getHistoryList()
					console.log('历史审查-------------------------------');
				}else if(this.tabIndex == 1 && this.current == 1){//历史审批
					this.historyList()
					console.log('历史审批-------------------------------');
				}
			},
			// 打开弹窗
			getItem(item){
				this.item = item
				this.show =true
			},
			
			// 对列表进行操作
			setItem(item,c,type){
				let data = {
					type:'',
					infoList:[
						{
							applyid:'33',
							state:type==1?'不同意':'同意',
							opinion:this.opinion
						}
					]
				}
				// if(!this.opinion){
				// 	this.show = false
				// 	return this.$uTips('请输入拒绝原因')
				// }
				if(c == 0){//审查操作
					data.type ='censor'
					data.infoList[0].applyid = item.applyid
					
				}else{
					data.type ='audit' 
					data.infoList[0].applyid = item.taskId
				}
				console.log(item);
				
				this.$api.vetting({data:data}).then(res => {
					this.setlist()
					this.show = false
					this.$uTips('操作成功')
				}).catch(res => {
					this.$uTips(res.data.message)
				})
			},
			
			// 获取详情
			getDetail(t,c,item){
				// console.log(item);
				// return
				this.$navigateTo('../index/index?applyId='+item.applyid)
			},
			
			change(e){
				this.tabIndex = e
				
			},
			// 审批列表 当前
			currentList(){
				this.$api.currentList({data:{academy:this.search}}).then(res => {
					this.datalist = res.data
				}).catch(res => {})
			},
			// 审批列表 历史
			historyList(){
				
				let data = {
					startTime:this.time.startDate,
					endTime:this.time.endDate
				}
				this.$api.historyList({data:this.time.startDate?data:{}}).then(res => {
					this.datalist = res.data
				}).catch(res => {})
			},
			// 审查 当前
			getlist1(){
				this.$api.list1({data:{academy:this.search}}).then(res => {
					this.datalist = res.data
				}).catch(res => {})
			},
			// 审查 历史
			getHistoryList(){
				let data = {
					startTime:this.time.startDate,
					endTime:this.time.endDate
				}
				this.$api.getHistoryList({data:this.time.startDate?data:{}}).then(res => {
					console.log(res.data);
					this.datalist = res.data
				}).catch(res => {})
			}
			
		}
	}
</script>

<style lang="scss">
	.list-head {
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
	}
	.list-date {
		margin: 0 28rpx;
		margin-top: 20rpx;
		.list-date-input {
			color: #909399;
			
			background-color: rgb(242, 242, 242);
			border-radius: 50px;
			height: 32px;
			line-height: 32px;
			text-align: center;
		}
		.reset {
			color: #fff;
			padding: 10rpx 24rpx;
			margin-left: 40rpx;
			border-radius: 8rpx;
			background-color: rgb(41, 121, 255);
		}
	}
	.search {
		width: 100%;
		padding: 0 28rpx;
		margin-top: 20rpx;
	}
	.list {
		padding-top: 88rpx;
	}
	.li {
		// padding: 0 ;
		margin: 0 28rpx;
		padding: 20rpx 28rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: white;
		.li-btn {
			color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			background-color: rgb(0, 151, 255);
		}
	}
	.popup {
		padding: 20rpx;
	}
	textarea {
		width: 400rpx;
		height: 100rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		// border: 2rpx solid #ccc;
	}
	.btn {
		padding: 10rpx 0;
		border-top: 2rpx solid #fcfcfc;
		
		view {
			flex: 1;
			text-align: center;
		};
	}
	.li-name {
		padding-top: 4rpx;
		text{
			color: #797B87;
			margin-right: 10rpx;
		}
	}
	
</style>
